<template>
  <a-spin :spinning="loading">
    <div class="order-detail" v-if="order" style="padding: 30px">
      <a-space>
        <a-button
          type="primary"
          @click="goPay(order.orderSn)"
          size="small"
          v-if="order.orderStatus == 0"
        >去支付
        </a-button
        >
        <a-button
          type="primary"
          danger
          @click="handleCancelOrder(order.orderSn)"
          v-if="order.orderStatus == 0"
          size="small"
        >取消订单
        </a-button
        >
      </a-space>
      <div class="order-card">
        <p class="global_color fontsize_18">{{ order.orderStatus_dictText }}</p>
        <p>订单号：{{ order.orderSn }}</p>
      </div>
      <div class="order-card">
        <h3>付款信息</h3>
        <p>支付方式：微信支付</p>
        <p>付款状态：{{ order.payStatus == 1 ? "已付款" : "未付款" }}</p>
      </div>
      <div class="order-card" v-if="order.orderStatus == 1">
        <h3>发票信息</h3>
        <template v-if="order.needReceipt && order.receipt">
          <p>发票抬头：{{ order.receipt.receiptTitle }}</p>
          <p>发票内容：{{ order.receipt.receiptContent }}</p>
          <p v-if="order.receipt.taxpayerId">
            纳税人识别号：{{ order.receipt.taxpayerId }}
          </p>
        </template>
        <div v-else style="color: #999; margin-left: 5px">未开发票</div>
      </div>
      <!-- 订单商品 -->
      <div class="goods">
        <div class="shop-name">
          <span @click="shopPage(order.sellerId)">{{ order.sellerName }}</span>
        </div>
        <table>
          <thead>
          <tr>
            <th width="30%">商品</th>
            <th width="15%">货号</th>
            <th width="10%">单价</th>
            <th width="5%">数量</th>
            <th width="10%">实际退款金额</th>
            <th width="10%">小计</th>
            <th width="10%">操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(goods, goodsIndex) in order?.goodsList" :key="goodsIndex">
            <td>
              <img
                @click="goodsDetail(goods.goodsId)"
                :src="getFileAccessHttpUrl(goods.goodsImage)"
                alt=""
              />
              <div>
                <p
                  @click="goodsDetail(goods.goodsId)"
                  class="hover-color"
                >
                  {{ goods.goodsName }}
                </p>
              </div>
            </td>
            <td>{{ goods.id }}</td>
            <td>{{ unitPrice(goods.purchasePrice, "￥", "") }}</td>
            <td>{{ goods.number }}</td>
            <td>{{ unitPrice(goods.refundPrice, "￥", "") }}</td>
            <td>{{ unitPrice(goods.subTotal, "￥", "") }}</td>
            <td>
              <a-button
                v-if="order.orderStatus == 1"
                @click="comment(order.orderSn, goods.id)"
                size="small"
                type="primary"
              >评价
              </a-button
              >
            </td>
          </tr>
          </tbody>
        </table>
        <!-- 订单价格 -->
        <div class="order-price">
          <div>
            <span>商品件数：</span><span>{{ order.goodsNumber }}件</span>
          </div>
          <div>
          <span>商品总价：</span
          ><span>{{ unitPrice(order.goodsPrice, "￥", "") }}</span
          ><br />
          </div>
          <div>
            <span>应付金额：</span>
            <span class="actrual-price">{{ unitPrice(order.actualPrice, "￥", "") }} </span>
          </div>
        </div>
      </div>
    </div>
  </a-spin>
</template>
<script lang="ts" setup>
import { cancelOrder, orderDetail } from "@/api/order";
import { onMounted, ref } from "vue";
import { useMessage } from "@/hooks/web/useMessage";
import { useRoute, useRouter } from "vue-router";
import { unitPrice } from "@/utils";
import { getFileAccessHttpUrl } from "@/utils/compUtils";

const router = useRouter();
const loading = ref<boolean>(false); // 加载状态

const route = useRoute();
const orderSn: any = route.params?.orderSn;

const order = ref<any>({}); // 订单详情数据
const { createMessage } = useMessage();
const { createConfirm } = useMessage();

function goodsDetail(goodsId) {
  // 跳转商品详情
  let routeUrl = router.resolve({
    path: `/mall/goods/detail/${goodsId}`
  });
  window.open(routeUrl.href, "_blank");
}

// 跳转店铺首页
function shopPage(id) {
  let routeUrl = router.resolve({
    path: "/Merchant",
    query: { id: id }
  });
  window.open(routeUrl.href, "_blank");
}

async function getOrderDetail() {
  // 获取订单详情
  const res: any = await orderDetail(orderSn);
  order.value = res.result;
}

function goPay(orderSn) {
  router.push(`/mall/thirdPay/${orderSn}`);
}

function comment(orderSn, orderGoodsId) {
  // 评价
  router.push({
    path: `/userCenter/myOrder/addEval/${orderSn}/${orderGoodsId}`
  });
}

function handleCancelOrder(orderSn) {
  createConfirm({
    iconType: "warning",
    title: "取消订单",
    content: "确认取消当前订单吗?",
    okText: "确认",
    cancelText: "取消",
    onOk: async () => {
      await sureCancel(orderSn);
    }
  });
}

async function sureCancel(orderSn) {
  // 确定取消
  await cancelOrder(orderSn);
  createMessage.success("取消订单成功");
  getOrderDetail();
}

onMounted(() => {
  getOrderDetail();
});

</script>
<style lang="scss" scoped>
@import "@/assets/style/course/global.scss";

.mb_10 {
  a-button:nth-of-type(2) {
    margin-left: 10px;
  }
}

.mb_5 {
  margin-bottom: 5px;
}

.order-card {
  padding: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e8eaec;
  position: relative;

  .global_color {
    color: $theme_color;
  }

  p {
    color: #999;
    margin: 10px 5px;
  }

  h3 {
    font-weight: normal;
    font-size: 16px;
  }

  .operation-time {
    position: absolute;
    right: 20px;
    top: 20px;
  }
}

/** 店铺名称 */
.shop-name {
  margin: 15px 0;

  span {
    color: #438cde;
    cursor: pointer;

    &:hover {
      color: $theme_color;
    }
  }

  .ivu-icon {
    color: #ff8f23;
    cursor: pointer;

    &:hover {
      color: $theme_color;
    }
  }
}

/** 商品列表 */
table {
  border: 1px solid #ddd;
  color: #999;
  border-collapse: collapse;
  width: 100%;

  tr {
    border-top: 1px solid #ddd;
  }

  thead > tr {
    height: 40px;
    background: #eee;
  }

  td {
    padding: 5px;
    text-align: center;

    &:first-child {
      text-align: left;
      display: flex;

      img {
        width: 70px;
        height: 70px;
        margin-right: 10px;
        margin-left: 10px;
        cursor: pointer;
      }
    }

    &:last-child {
      color: $theme_color;
    }
  }
}

/** 订单价格 */
.order-price {
  text-align: right;
  margin-top: 30px;
  font-size: 16px;
  color: #999;

  > div > span:nth-child(2) {
    width: 130px;
    text-align: right;
    display: inline-block;
    margin-top: 10px;
  }

  .actrual-price {
    color: $theme_color;
    font-weight: bold;
    font-size: 20px;
  }
}

.verificationCode {
  font-size: 20px;
  margin-bottom: 20px;
  color: rgb(65, 63, 63);
  font-weight: bold;
  text-align: center;

  span {
    color: $theme_color;
  }
}

/** 订单进度条 */
.progress {
  margin: 15px 0;
}

.layui-layer-wrap {
  dl {
    border-top: solid 1px #f5f5f5;
    margin-top: -1px;
    overflow: hidden;

    dt {
      font-size: 14px;
      line-height: 28px;
      display: inline-block;
      padding: 8px 1% 8px 0;
      color: #999;
    }

    dd {
      font-size: 14px;
      line-height: 28px;
      display: inline-block;
      padding: 8px 0 8px 8px;
      border-left: solid 1px #f5f5f5;

      .text-box {
        line-height: 40px;
        color: #333;
        word-break: break-all;
      }
    }
  }
}


.layui-layer-wrap {
  dl {
    border-top: solid 1px #f5f5f5;
    margin-top: -1px;
    overflow: hidden;

    dt {
      font-size: 14px;
      line-height: 28px;
      display: inline-block;
      padding: 8px 1% 8px 0;
      color: #999;
    }

    dd {
      font-size: 14px;
      line-height: 28px;
      display: inline-block;
      padding: 8px 0 8px 8px;
      border-left: solid 1px #f5f5f5;

      .text-box {
        line-height: 40px;
        color: #333;
        word-break: break-all;
      }
    }
  }
}
</style>
